<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">

        <div class="container-fluid">
            <!--标题行-->
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
            </div>

            <!--数据行-->
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <!--添加按钮-->
                    <a href="" class="btn btn-success btn-sm">添加</a>
                    <!--列表-->
                    <table class="table table-striped table-bordered" style="margin-top: 10px;">
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>工资</th>
                            <th>年龄</th>
                            <th>简介</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.description}}</td>
                            <td>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                                <a href="" class="btn btn-info btn-sm" @click.prevent>修改</a>
                            </td>
                        </tr>
                    </table>
                    <!--添加 和 修改表单-->
                    <form>
                        <div class="form-group">
                            <label class="control-label">编号</label>
                            <div>
                                <p class="form-control-static">0001</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="salary">工资</label>
                            <input type="text" class="form-control" id="salary" placeholder="输入工资">
                        </div>
                        <div class="form-group">
                            <label for="age">年龄</label>
                            <input type="text" class="form-control" id="age" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="description">个人简介</label>
                            <input type="text" class="form-control" id="description" placeholder="输入工资">
                        </div>

                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
            </div>
        </div>



    </div>
</body>
</html>
<!--引入vue-->
<script src="../js/vue.js"></script>
<!--引入axios-->
<script src="../js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"vue 生命周期",
            users:[],
        },
        methods:{

        },
        computed:{

        },
        created(){
            //发送axios请求
            // axios.get("http://localhost:8989/users").then(res=>{
            //     this.users =  res.data;
            // });
            this.users = [{id:1,name:"小陈",age:23,salary:2400,description:"他是一个小白!!!"}]
        }
    })
</script>